<template>
    <div>
        <!-- 职位分类 -->
        <p style="margin-top:20px;margin-left:10px;"><a-button type="primary" size="small" @click="()=>{visible1=true}">添加</a-button>&nbsp;&nbsp;<a-button type="primary" size="small" @click="editall">保存</a-button></p>
        <a-table :columns="columns" :data-source="data" bordered size="small" :customHeaderRow="customHeaderRow" :customRow="customRow" :pagination="false">
            <template #fname="{record}">
                <input type="text" v-model="record.name" class="input1" @change="ee(record)">(ID:{{record.id}})
            </template>
            <template #sort="{record}">
              <input type="text" v-model="record.sort_id" class="input1" @change="ee(record)">
            </template>
            <template #cao="{record}">
              <a-button size="small" @click="add(record)" v-if="record.level!='3'">在此类下添加子类</a-button>&nbsp;&nbsp;<a-button type="primary" size="small" @click="eidt(record.id)">编辑</a-button>&nbsp;&nbsp;<a-button type="primary" size="small" danger @click="open(record.id)">删除</a-button>
            </template>
        </a-table>
    </div>
    <a-modal v-model:visible="visible1" title="添加" :footer="null">
      <a-form :model="addform" :label-col="{span:4}" :wrapper-col="{span:24}" :rules="rules">
        <a-form-item label="所属分类">
          <el-cascader v-model="addform.pid" placeholder="顶级" :options="data1" :props="{checkStrictly: true,label:'name',value:'id',children:'children'}" clearable :show-all-levels=false />
        </a-form-item>
        <a-form-item label="名称" name="name">
          <a-input v-model:value="addform.name" />
        </a-form-item>
        <a-form-item label="排序">
          <a-input v-model:value="addform.sort_id"/>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 24, offset: 4 }">
          <a-button style="margin-left: 10px">取消</a-button>
          <a-button type="primary" @click="onSubmit" class="but">添加</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal v-model:visible="visible2" title="添加分类" :footer="null">
      <a-form :model="addform1" :label-col="{span:4}" :wrapper-col="{span:24}" :rules="rules">
        <a-form-item label="所属分类">
          <el-cascader v-model="addform1.pid" placeholder="顶级" :options="data1" :props="{checkStrictly: true,label:'name',value:'id',children:'children'}" clearable :show-all-levels=false />
        </a-form-item>
        <a-form-item label="名称" name="name">
          <a-input v-model:value="addform1.name" />
        </a-form-item>
        <a-form-item label="排序">
          <a-input v-model:value="addform1.sort_id"/>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }" >
          <a-button style="margin-left: 10px">取消</a-button>
          <a-button type="primary" @click="onSubmit1" class="but">添加</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal v-model:visible="visible3" title="编辑" :footer="null">
      <a-form :model="eidtform" :label-col="{span:4}" :wrapper-col="{span:24}" :rules="rules">
        <a-form-item label="所属分类">
          <el-cascader v-model="eidtform.pid" placeholder="顶级" :options="data1" :props="{checkStrictly: true,label:'name',value:'id',children:'children'}" clearable :show-all-levels=false />
        </a-form-item>
        <a-form-item label="名称" name="name">
          <a-input v-model:value="eidtform.name" />
        </a-form-item>
        <a-form-item label="排序">
          <a-input v-model:value="eidtform.sort_id"/>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }" >
          <a-button style="margin-left: 10px">取消</a-button>
          <a-button type="primary" @click="onSubmit2" class="but">编辑</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
</template>

<script lang="ts" setup>
import { message } from 'ant-design-vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import {onMounted, reactive, ref} from 'vue'
import { useStore } from "vuex";
const customHeaderRow=()=> {
       return {
            style: {
                'font-size' : '10px'
            },
        }
    }
const customRow=() =>{
      return {
          style: {
              'font-size' : '10px'
          },
      }
  }
const columns = [
  { title: '分类名称', key: 'fname',slots: { customRender: 'fname' },width:500  },
  { title: '别名', dataIndex: "spell", key: 'alias',width:200 },
  { title: '排序', key: 'sort', slots: { customRender: 'sort' } },
  { title: '操作', key: 'cao',slots:{customRender:'cao'} },
];
const rules = {
      name: [
        { required: true, message: '请输入职位名称', trigger: 'blur' },
      ]}
let addform=reactive({
  name:'',
  sort_id:'0',
  pid:'',
  level:'0'
})
let addform1=reactive({
  name:'',
  sort_id:'0',
  pid:'',
  level:'0'
})

let store=useStore()
let visible1=ref(false)
let visible2=ref(false)
let visible3=ref(false)
let delid=ref('')
let data=ref([])
let data1=ref([])
let eidtform=reactive({
  name:'',
  sort_id:'',
  pid:'',
  level:'',
  id:''
})
const eidt=(id:any)=>{
  store.dispatch("user/postone",id)
      .then(async(e: any) => {
        console.log(e.data.list[0]);
        eidtform.name=e.data.list[0].name
        eidtform.sort_id=e.data.list[0].sort_id
        eidtform.pid=e.data.list[0].pid
        eidtform.level=e.data.list[0].level
        eidtform.id=e.data.list[0].id
      })
      .catch((err) => {
        // message.error(err.message || err.data.message)
      });
  visible3.value=true

}
const add=async(re:any)=>{
  addform1.pid=re.id
  addform1.level=`${parseInt(re.level)+1}`
  visible2.value=true
  await getlist1()
}
const onSubmit1=()=>{
  store.dispatch("user/postadd",addform1)
      .then(async(e: any) => {
        await getlist()
      })
      .catch((err) => {
        // message.error(err.message || err.data.message)
      });
      addform1.name=""
      visible2.value=false
}
const onSubmit2=()=>{
  store.dispatch("user/postedit",eidtform)
      .then(async(e: any) => {
        await getlist()
      })
      .catch((err) => {
        // message.error(err.message || err.data.message)
      });
      visible3.value=false
}
const getlist=async()=>{
  store
    .dispatch("user/postlist")
    .then((e: any) => {
      // console.log(1233);
      data.value =e.list
    })
    .catch((err) => {
      // message.error(err.message || err.data.message);
      
    });
}
const getlist1=async()=>{
  store
    .dispatch("user/postlist")
    .then((e: any) => {
      // console.log(1233);
      for(let i=0;i<e.list.length;i++){
        if(e.list[i].children){
          for(let o=0;o<e.list[i].children.length;o++){
            if(e.list[i].children[o].children){
              delete e.list[i].children[o]["children"]
        }
          }
        }
        
      }
      data1.value =e.list
      console.log(data1.value);
      
    })
    .catch((err) => {
      // message.error(err.message || err.data.message);
      
    });
}
const open = (id:any) => {
  delid.value=id
  ElMessageBox.confirm(
    '将永久删除是否确定?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      store.dispatch("user/postdel",delid.value)
      .then(async(e: any) => {
        await getlist()
      })
      .catch((err) => {
        // message.error(err.message || err.data.message);
        ElMessage({
          type: 'info',
          message: '删除关闭',
        })
      });
      ElMessage({
        type: 'success',
        message: '删除完毕',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除关闭',
      })
    })
}
const onSubmit=()=>{
  console.log(addform.pid);
  if(addform.pid){
      if(addform.pid.length==1){
        addform.pid=addform.pid['0']
        addform.level="2"
      }else if(addform.pid.length==2){
        console.log(addform.pid);
        
        addform.pid=addform.pid['1']
        addform.level="3"
      }
  }else{
    addform.pid='0'
    addform.level="1"
  }
  store.dispatch("user/postadd",addform)
      .then(async(e: any) => {
        await getlist()
      })
      .catch((err) => {
        // message.error(err.message || err.data.message)
      });
  addform.pid=''
  addform.name=''
  addform.sort_id='0'
  visible1.value=false
}
const editlist=ref<any>([])
const ee=(record:any)=>{
  let a={id:record.id,name:record.name,sort_id:record.sort_id}
  editlist.value.push(a)
}
const editall=async()=>{
  await editlist.value.forEach((item:any)=>{
    store.dispatch("user/postedit",item)
      .then((e: any) => {
      })
      .catch((err) => {
        // message.error(err.message || err.data.message)
      });
  })
  await getlist()
  message.success('保存成功')
  
}
onMounted(()=>{
  getlist()
  getlist1()
})
</script>

<style scoped>
.input1{
  border: 0.2px solid grey;
  padding-left: 10px;
  border-radius: 2px;
}
.but{
  /* display: flex; */
  margin-left: 50px;
}
</style>